<template>
	<view class="content">
		<uni-swiper-dot :info="cover" :current="currentSwiper">
			<swiper class="swiper-box" circular autoplay @change="changeSwiper">
				<swiper-item v-for="(item ,index) in cover" :key="index">
					<image :src="item" :alt="item" mode="aspectFill" @click="previewCover(index)" />
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
		<view class="flower-header">
			<view class="price">
				{{ `￥ ${flowerData.price??"--"}` }}
			</view>
			<view
				v-if="flowerData.presale && flowerData.presale_delivery_date && dayjs(flowerData.presale_delivery_date) > dayjs()"
				class="presale">
				<uni-tag text="预售商品" type="warning" />
				<text v-if="flowerData.presale_delivery_date" class="date">
					发货日期：{{ dayjs(flowerData.presale_delivery_date).format("YYYY-MM-DD") }}
				</text>
			</view>
			<view class="original-price">
				<text>{{ `标价：￥ ${flowerData.original_price??"--"}` }}</text>
				<text>{{ `销量：${flowerData.sales_count??0}` }}</text>
			</view>
			<view class="name">{{ flowerData.name }}</view>
			<view class="tips">鲜花属于鲜活类产品，收货后请注意低温保鲜养护</view>
			<view class="tips">花束由花艺师手工包扎，图片仅供参考，请以实物为准</view>
			<view class="tags">
				<view class="tag">
					<uni-icons custom-prefix="iconfont" type="icon-shield-check" color="#50af50" :size="16"></uni-icons>
					新鲜保障
				</view>
				<view class="tag">
					<uni-icons custom-prefix="iconfont" type="icon-shield-check" color="#50af50" :size="16"></uni-icons>
					全国配送
				</view>
				<view class="tag">
					<uni-icons custom-prefix="iconfont" type="icon-shield-check" color="#50af50" :size="16"></uni-icons>
					图片回传
				</view>
				<view class="tag">
					<uni-icons custom-prefix="iconfont" type="icon-shield-check" color="#50af50" :size="16"></uni-icons>
					2小时达
				</view>
			</view>
		</view>
		<view class="flower-info">
			<uni-section title="类别" :sub-title="flowerTypeText"></uni-section>
			<uni-section v-if="flowerOccasionMap[flowerData.occasion]" title="适用场合"
				:sub-title="flowerOccasionMap[flowerData.occasion]"></uni-section>
			<uni-section v-if="flowerData.description" title="描述" :sub-title="flowerData.description"></uni-section>
			<uni-section title="附送" sub-title="下单填写留言，即免费赠送精美贺卡！"></uni-section>

			<view v-if="flowerData.images && flowerData.images.length > 0">
				<view v-for="item in cover" style="padding: 10px 10px 0 10px;" :key="item">
					<image :src="item" style="width: 100%;display: block;" mode="widthFix">
					</image>
				</view>
			</view>
			<view style="padding: 10px">
				<image src="/static/images/service_notes.png" style="width: 100%;display: block;" mode="widthFix">
				</image>
			</view>
			<view :style="{height: `${safeAreaBottom+50}px`}"></view>
		</view>
		<view
			style="position: fixed;width: 100vw;bottom: 0;background-color: #fff;box-shadow: 0px -2px 4px 2px rgba(0,0,0,0.1);"
			:style="{'paddingBottom':safeAreaBottom+'px'}">
			<uni-goods-nav :options="goodsNavOptions" @click="handleClickGoodsNav" :button-group="goodsNavButtonGroup"
				@buttonClick="handleClickGoodsNavBtn" />
		</view>
	</view>
</template>
<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
		computed
	} from "vue"
	import {
		SERVER_URL
	} from "@/config/index.js"
	import {
		FlowerOccasion
	} from "@/constants/index.js"
	import {
		useShoppingCartStore
	} from "@/stores/shopping-cart.js"
	import {
		useOrderStore
	} from "@/stores/order.js"
	import dayjs from "dayjs"
	import {
		useUserStore
	} from "@/stores/user.js"

	const userStore = useUserStore()

	const currentSwiper = ref(0)

	const changeSwiper = (e) => {
		currentSwiper.value = e.detail.current;
	}

	const state = reactive({
		id: null,
		loading: false
	})

	const goodsNavOptions = ref([{
		icon: 'shop',
		type: "home",
		text: '首页'
	}, {
		icon: 'headphones',
		type: "contact",
		text: '客服',
	}, {
		icon: 'cart',
		type: "cart",
		text: '购物车',
		info: computed(() => shoppingCartStore.products.length)
	}])

	const goodsNavButtonGroup = computed(() => {
		if (flowerData.value && flowerData.value.presale) {
			return [{
				text: '立即购买',
				backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
				color: '#fff',
				type: 2
			}]
		}

		return [{
				text: '加入购物车',
				backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
				color: '#fff',
				type: 1
			},
			{
				text: '立即购买',
				backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
				color: '#fff',
				type: 2
			}
		]
	})

	const flowerTypeMap = ref({})

	const flowerTypeText = computed(() => {
		console.log(flowerData.value.type, flowerTypeMap.value[flowerData.value.type])
		if (flowerData.value.type && flowerTypeMap.value[flowerData.value.type]) {
			return flowerTypeMap.value[flowerData.value.type].name
		}
		return "鲜花"
	})

	const loadFlowerType = () => {
		return new Promise((resolve, reject) => {
			uni.showLoading()
			uni.request({
				url: SERVER_URL + '/flower/type/all',
				method: "GET",
				success: (res) => {
					if (res.statusCode === 200) {
						console.log(res.data);
						flowerTypeMap.value = res.data.reduce((map, item) => {
							map[item.id] = item
							return map
						}, {})

						console.log(flowerTypeMap.value)
						resolve()
					} else {
						reject()
					}
				},
				fail: (e) => {
					reject(e)
				},
				complete: () => {
					uni.hideLoading()
				}
			});
		})
	}

	const handleClickGoodsNav = (e) => {
		console.log(e)
		switch (e.content.type) {
			case "home":
				uni.switchTab({
					url: "/pages/index/index"
				})
				return
			case "contact":
				uni.navigateTo({
					url: "/pages/user/contact"
				})
				return
			case "cart":
				uni.switchTab({
					url: "/pages/shopping-cart/shopping-cart"
				})
				return
		}
	}

	const flowerData = ref({})

	const cover = computed(() => {
		if (flowerData.value.images) {
			return flowerData.value.images.map((item) => {
				return SERVER_URL + item
			})
		}

		return ["/static/images/flower.png"]
	})

	const loadData = () => {
		uni.showLoading()
		state.loading = true
		uni.request({
			url: SERVER_URL + '/flower/detail/' + state.id,
			method: "GET",
			success: (res) => {
				console.log(res.data);
				flowerData.value = res.data
			},
			complete: () => {
				uni.hideLoading()
				state.loading = false
			}
		});
	}

	const previewCover = (index) => {
		uni.previewImage({
			current: index,
			urls: cover.value,
			loop: true
		});
	}

	const safeAreaBottom = ref(0)

	const flowerOccasionMap = ref({})

	const shoppingCartStore = useShoppingCartStore()
	const handleAddShoppingCart = () => {
		if (flowerData.value && flowerData.value.id) {
			shoppingCartStore.addProduct({
				flower_id: flowerData.value.id,
				quantity: 1
			})
		}
	}
	const orderStore = useOrderStore()
	const handleSettlement = () => {
		if (flowerData.value) {
			orderStore.settlement({
				products: [{
					id: 0,
					flower: flowerData.value,
					quantity: 1
				}],
				presale: flowerData.value.presale,
				presale_delivery_date: flowerData.value.presale_delivery_date
			})
		}
	}

	const handleClickGoodsNavBtn = (e) => {
		if (userStore.id) {
			switch (e.content.type) {
				case 1:
					handleAddShoppingCart()
					return
				case 2:
					handleSettlement()
					return
			}
		} else {
			uni.showModal({
				title: "请先登录账号",
				success: (res) => {
					if (res.confirm) {
						uni.switchTab({
							url: "/pages/user/user"
						})
					}
				}
			})
		}
	}

	onLoad(async (e) => {
		if (userStore.id) {
			shoppingCartStore.loadShoppingCart()
		}

		flowerOccasionMap.value = FlowerOccasion.reduce((map, item) => {
			map[item.value] = item.label
			return map
		}, {})

		await loadFlowerType()
		state.id = e.id
		loadData()

		const windowInfo = uni.getWindowInfo()
		safeAreaBottom.value = windowInfo.safeAreaInsets.bottom
	})
</script>
<style scoped lang="scss">
	.content {
		background: #F2F6FD;

		.flower-header {
			background-color: #fff;
			padding: 16px 10px 24px 10px;
			margin-bottom: 24px;

			.price {
				font-size: 1.5rem;
				color: #f24051;
			}

			.presale {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 6px 0;

				.date {
					font-size: 14px;
					color: #999;
				}
			}

			.original-price {
				font-size: 14px;
				color: #999;
				margin-top: 6px;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.name {
				margin: 12px 0;
			}

			.tips {
				font-size: 12px;
				margin-bottom: 6px;
				color: #999;
			}

			.tags {
				display: flex;
				justify-content: space-between;
				margin-top: 12px;

				.tag {
					// flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;

					uni-icons {
						margin-right: 4px;
					}
				}
			}
		}

		.flower-info {
			padding-top: 24px;
			background-color: #fff;
		}
	}

	.swiper-box {
		height: 320px;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	:deep(.uni-section) {
		.uni-section-header {
			padding-top: 0;
		}
	}
</style>